<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>toggle dark mode</title>
  <link rel="stylesheet" href="./style.css" type="text/css" />
  <body>
    <div class="wrapper">
      <header class="main-head">
        <h1>Toggle Dark Mode Demo</h1>
      </header>
      <div class="head-widgets">
        <form>
          <div class="description">Dark mode</div>
          <div class="switch">
            <input type="radio" id="on" name="status" value="on" checked />
            <label for="on">On</label>
            <input type="radio" id="off" name="status" value="off" />
            <label for="off">Off</label>
            <span class="toggle-outside"
              ><span class="toggle-inside"></span
            ></span>
          </div>
        </form>
      </div>
      <article class="content">
        <h1>Dark theme or mode</h1>
        <p>
          Dark mode, is a tendency toward designing with a predominantly dark
          palette. Instead of using white or light-colored backgrounds, you use
          a black or dark background. As a consequence, text and icons are
          necessarily light to ensure they are visible.
        </p>

        <blockquote>
          Dark themes reduce the luminance emitted by device screens, while
          still meeting minimum color contrast ratios. They help improve visual
          ergonomics by reducing eye strain, adjusting brightness to current
          lighting conditions, and facilitating screen use in dark environments
          – all while conserving battery power. Devices with OLED screens
          benefit from the ability to turn off black pixels at any time of day.
        </blockquote>

        <h2>Use dark UIs:</h2>

        <ul>
          <li>When a branding color scheme warrants it</li>
          <li>
            When the design is sparse and minimalist with only a few content
            types
          </li>
          <li>
            When it is appropriate for the context and use, such as nighttime
            entertainment apps
          </li>
          <li>
            To reduce eye strain, such as analytics pages that are used for long
            periods of time
          </li>
          <li>
            To elicit an emotion—for example, a feeling of intrigue and mystery
          </li>
          <li>To create a striking, dramatic look</li>
          <li>To create a sense of luxury and prestige</li>
          <li>To support visual hierarchy</li>
        </ul>
      </article>
      <aside class="side">
        <h2>Related Article</h2>
        <p>
          Read more at my
          <a
            href="https://elissavet.dev/articles/dark-theme-mode-toggle-switcher-examples/"
            target="_blank"
            >personal blog</a
          >.
        </p>
        <h2>React Version</h2>
        <p>
          I have built also a ReactJs demo, with the same concept. You can see
          it working here:
          <a
            href="https://elisavettriant.github.io/dark-mode-switcher-react/"
            target="_blank"
            >Dark Mode Switcher Demo</a
          >. See the
          <a
            href="https://github.com/elisavetTriant/dark-mode-switcher-react"
            target="_blank"
            >source code</a
          >.
        </p>

        <h2>Alternative demo</h2>
        <p>
          I have built an alternative demo, forked from this one, to showcase
          the
          <a
            href="https://codepen.io/elisavetTriant/pen/xxgMJMa"
            target="_blank"
            >light mode as default</a
          >, while keeping the original code and source code editing to the
          minimum.
        </p>

        <h2>Credits</h2>
        <p>
          Read about
          <a
            href="https://material.io/design/color/the-color-system.html#color-theme-creation"
            target="_blank"
            >Theming</a
          >
          and the
          <a
            href="https://material.io/design/color/dark-theme.html"
            target="_blank"
            >Dark theme</a
          >
          on <a href="https://material.io/" target="_blank">Material Design</a>.
        </p>
        <p>
          Special thanks to Ryan Feigenbaum for his excellent article on
          <a href="https://ryanfeigenbaum.com/dark-mode/" target="_blank"
            >Dark Mode Toggle</a
          >.
        </p>

        <p>
          Cheers to Nick Bottomley for his pen on
          <a href="https://codepen.io/nickbottomley/pen/uhfmn" target="_blank"
            >On-Off Switches</a
          >.
        </p>
      </aside>
      <footer class="main-footer">
        <p style="text-align: center">
          Made with love by
          <a href="https://elissavet.dev/" target="blank">Elissavet</a> for the
          CodePen Challenge
          <a href="https://codepen.io/challenges/2021/april/3" target="blank"
            >Build a Pen with a good on/off microinteraction</a
          >.
        </p>
        <p style="text-align: center">Thank you for visiting!</p>
      </footer>
    </div>
    <script src="./script.js" type="text/javascript"></script>
  </body>
</html>
